<template>
  <el-dialog
    title="订单处理"
    v-model="model"
    width="800px"
    :before-close="handleClose"
  >
    <div class="orderInfo">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="收费类型" prop="feeType">
          <el-select v-model="form.feeType" placeholder="请选择">
            <el-option
              v-for="item in feeTypeMap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="6"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { sendRepairOrder } from "@/api/operateManage";
import { feeTypeMap } from "../repair/config";

const props = defineProps({
  row: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["submit"]);

const model = defineModel({
  default: false,
});

const orderDetail = props.row;

const formRef = ref();
const form = ref({});
const rules = ref({
  repairUserId: [{ required: true, message: "请选择指派给", trigger: "blur" }],
  feeType: [{ required: true, message: "请选择服务类型", trigger: "blur" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
});
const statusOptions = [
  {
    label: "待收费",
    value: 2,
  },
  {
    label: "已完成",
    value: 5,
  },
];

const handleClose = () => {
  model.value = false;
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      sendRepairOrder({
        id: orderDetail.id,
        ...form.value,
      }).then((res) => {
        if (res.data) {
          ElMessage.success("处理成功");
          model.value = false;
          emit("submit");
        }
      });
    }
  });
};
</script>

<style scoped>
.labelStyle {
  width: 200px;
  word-break: break-all;
}
.contentStyle {
  text-align: center;
  width: 400px;
  word-break: break-all;
}
</style>
